<template>
    <div class="box">
        <div>msg: {{ msg }}</div>
        <button @click="changeMsgHandler">修改msg</button>
        <button @click="changeMsg">修改msg2</button>
        <div>username: {{ userinfo.username }}</div>
        <div>age: {{ userinfo.age }}</div>
        <button @click="changeUserInfoHandler">修改userinfo</button>
    </div>
</template>

<script>
export default {
    name: "Child",
    props: {
        msg: {
            type: String,
            required: true,
            default: 'qwer'
        },
        userinfo: {
            type: Object,
            default() {
                return{
                    username: '狗晨',
                    age: 0
                }
            }
        },
        changeMsg: {
            type: Function,
            required: true
        }
    },
    methods: {
        changeMsgHandler() {
            this.msg = '哈麻皮，刚才'
        },
        changeUserInfoHandler() {
            // 不能直接修改传过来对象的地址
            // this.userinfo = {
            //     username: '沈腾',
            //     age: 40
            // }
            this.userinfo.username = '郭辰'
            this.userinfo.age = 250*2
        }
    }
}
</script>

<style scoped>

</style>